<template>
	<view class="container">
		<view v-if="status == 2" class="code">
			<view>销核码: WX7238648H</view>
			<img src="@/static/code.png" alt="" />
		</view>
		<view class="title">
			订单信息
		</view>
		<uni-card>
			<view class="order-container">
				<view>
					订单编号:123456
				</view>
				<view class="uni-error">
					<text v-if="status == 1">待支付</text>
					<text v-else-if="status == 2">待使用</text>
					<text v-else-if="status == 3">待评价</text>
					<text v-else-if="status == 4">已完成</text>
					<text v-else-if="status == 5">已取消</text>
					<text v-else="status == 6">已退款</text>
				</view>
			</view>
			<!-- 中间详情部分 -->
			<view class="order-detail">
				<view>
					<text>服务项目:&emsp;车辆保养</text>
					<view class="goShop">
						<text>服务门店:&emsp;宇宙汽修厂</text>
						<img src="@/static/plane.png" alt="" />
					</view>
					<text>下单时间:&emsp;2022-09-10 12:09</text>
					<text>预约时间:&emsp;2022-09-10 12:09</text>
					<text>车辆:&emsp;奔驰FWE4/豫A98FHJ</text>
					<text>备注:&emsp;</text>
				</view>
			</view>
		</uni-card>

		<view class="title">
			订单详情
		</view>
		<uni-card>
			<view class="detail">
				<text>车辆精洗</text>
				<text>￥199</text>
			</view>
			<view class="detail">
				<text>车辆附加费用</text>
				<text>￥199</text>
			</view>
		</uni-card>

		<uni-card>
			<view class="detail">
				<text>原价</text>
				<text>￥199</text>
			</view>
			<!-- 判断是否使用优惠券 -->
			<view class="detail">
				<text>优惠</text>
				<text class="uni-error">-￥199</text>
			</view>
			<view class="pay">
				<text>支付金额</text>
				<text>￥0</text>
			</view>
		</uni-card>
		
		<view v-if = "status == 4" class="evaluate">
			<view>评价结果</view>
			<uni-card>
				<view>评价时间：2012-12-12 12:12</view>
				<view class="result">评价结果：<uni-rate disabled disabled-color="#ffca3e" :size="18" :value="4"/></view>
				<view>评语：来洗车来洗车来洗车来洗车来洗车来洗车</view>
			</uni-card>
		</view>

		<view class="footer">
			<view>
				<img src="@/static/service.png" alt="" />
				<view>
					联系客服
				</view>
			</view>
			<!-- 做判断显示对应按钮 -->
			<view>
				<uni-tag v-if="status ==1" type="primary" @click="cancelOrder" inverted text="取消订单"></uni-tag>
				<uni-tag v-if="status ==1" type="primary" @click="toPay" text="立即支付"></uni-tag>
				<uni-tag v-if="status ==2" type="primary" @click="toRefund" inverted text="申请退款"></uni-tag>
				<uni-tag v-if="status ==3" type="primary" @click="toEvaluate" inverted text="立即评价"></uni-tag>
				<uni-tag v-if="status == 3 || status==4 || status ==5 || status==6" type="primary" @click="againOrder" text="再来一单"></uni-tag>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				status: 0,
			}
		},
		onLoad(options) {
			this.status = options.status
			if (options.status == 1) {
				uni.setNavigationBarTitle({
					title: '待支付订单'
				})
			} else if (options.status == 2) {
				uni.setNavigationBarTitle({
					title: '待使用订单'
				})
			} else if (options.status == 3) {
				uni.setNavigationBarTitle({
					title: '待评价订单'
				})
			} else if (options.status == 4) {
				uni.setNavigationBarTitle({
					title: '已完成订单'
				})
			} else if (options.status == 5) {
				uni.setNavigationBarTitle({
					title: '已取消订单'
				})
			} else {
				uni.setNavigationBarTitle({
					title: '已退款订单'
				})
			}
		},
		methods: {
			// 以下事件均需传入订单id进行操作
			// 再来一单
			againOrder() {

			},
			// 立即评价
			toEvaluate() {
				wx.navigateTo({
					url: '/pages/my/evaluate/evaluate'
				})
			},
			// 扫码结算
			toBalance() {
				this.$refs.popup.open()
			},
			// 申请退款
			toRefund() {
				uni.showModal({
					content: '退款后将原路返回到支付账户，请确认是否退款吗？',
					success(res) {
						if (res.confirm) {
							console.log('用户点击确定')
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
			// 立即支付
			toPay() {

			},
			// 取消订单
			cancelOrder() {
				uni.showModal({
					content: '确定要取消订单吗？',
					success(res) {
						if (res.confirm) {
							console.log('用户点击确定')
						} else if (res.cancel) {
							console.log('用户点击取消')
						}
					}
				})
			},
		}
	}
</script>

<style>
	.container {
		padding: 20rpx;
		padding-bottom: 200rpx;
		background-color: #fff;
		height: 100%;
	}

	.code {
		width: 100%;
		text-align: center;
		line-height: 50rpx;
	}

	.code img {
		width: 270rpx;
		height: 270rpx;
	}

	.title {
		font-weight: bold;
	}

	.order-container {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.order-container>view:nth-child(1) {
		font-weight: bold;
	}

	.arrow {
		width: 10rpx;
		height: 10rpx;
		border-top: 2rpx solid #000;
		border-right: 2rpx solid #000;
		transform: rotate(45deg);
	}

	.order-detail {
		display: flex;
		justify-content: space-between;
	}

	.order-detail>view:nth-child(1)>text {
		display: block;
		text-align: start;
		line-height: 60rpx;
	}

	.goShop {
		display: flex;
		align-items: center;
		padding: 8rpx 0;
	}

	.goShop>img {
		width: 30rpx;
		height: 30rpx;
		margin-left: 20rpx;
	}

	.detail {
		display: flex;
		justify-content: space-between;
		padding-bottom: 8rpx;
	}

	.pay {
		display: flex;
		justify-content: space-between;
		border-top: 2rpx solid #ccc;
		padding: 8rpx 0;
	}
	
	.result {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
	}

	.footer {
		position: fixed;
		left: 0px;
		bottom: 0px;
		width: 100%;
		z-index: 9999;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		box-shadow: 1rpx 3rpx 2rpx 3rpx rgb(0, 0, 0, 0.2);
	}


	.footer>view:nth-child(1) img {
		width: 50rpx;
		height: 50rpx;
	}

	.footer>view:nth-child(1) {
		text-align: center;
		font-size: 24rpx;
		margin-left: 20rpx;
	}

	.footer>view:nth-child(2) {
		display: flex;
		justify-content: space-around;
		margin-right: 20rpx;
	}

	.footer>view:nth-child(2)>uni-tag {
		margin-right: 20rpx;
	}
</style>